<template>
  <el-radio-group v-model="currentIndex">
    <el-radio-button v-for="(item, index) in list" :key="index" :label="index">{{ item }}</el-radio-button>
  </el-radio-group>
</template>

<script setup lang="ts">
  import { ref, withDefaults, defineProps, watch } from 'vue'
  interface Props {
    list: any
  }
  withDefaults(defineProps<Props>(), {
    list: []
  })
  const emit = defineEmits(['submit'])
  const currentIndex = ref(0)
  watch(currentIndex, (v) => {
    emit('submit', v)
  })
</script>

<style lang="scss" scoped>
  .statistics-btn {
    display: flex;
    .btn {
      width: 100px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #ff6b00;
      border-right: none;
      text-align: center;
      line-height: 36px;
      font-size: 16px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #ff6b00;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      &:last-child {
        border-right: 1px solid #ff6b00;
      }
    }
    .active {
      color: #ffffff;
      background: #ff6b00;
    }
  }
</style>
